<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>


    <script src="../../js/vue.js"></script>
    <div id="app2">
        <com-name>
            <span>插槽传递的内容</span>
        </com-name>
    </div>
    <script>

        Vue.component('comName', {
            template: `
                <div>
                    <span>下面的是插槽口</span>    <br>
                    <slot>默认内容</slot><br>
                </div>
            `
        })

        var vm2 = new Vue({
            el: '#app2'
        })
    </script>

    <hr>
    </hr>
    <div id="app">
        <com-name>
            <h2 slot='header'>
                表体内容
                <div>sdfjoe</div>
            </h2>
            <p>
                主要内容1
            </p>
            <p>
                主要内容2
            </p>
            <h2 slot='footer'>
                底部内容
            </h2>
            <p>
                主要内容3
            </p>
            <template slot='footer'>
                底部内容
            </template>
        </com-name>
    </div>
    <script>

        Vue.component('comName', {
            template: `
            <div>
                <span>下面的是具名插槽</span><br>
                <header>
                    <slot name='header'></slot>
                </header>
                <slot></slot>
                <footer>
                    <slot name='footer'></slot>
                </footer>
            </div>
        `
        })

        var vm2 = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>